<template>
	<view>
	<cu-custom bgColor="bg-cyan" isBack>
		<block slot="content">输入框</block>
	</cu-custom>
	<view class="smart-paddinf-wrap">
		<view class="item">可自动</view>
		<view> <input class="smart-input" focus="true" placeholder="自动"></view>
		<view class="item">右下角</view>
		<view> <input class="smart-input" confirm-type="search" placeholder="右下角"></view>
		<view>同步
		<text style="color: #007Aff;">{{inputValue}}</text>
		</view>
		<view>
			<input class="smart-input" @input="onKeyInput" placeholder="同步">
		</view>
		<view>带小数点输入</view>
		<view><input class="smart-input" type="digit" placeholder="带小数点"></view>
		<view>身份证输入</view>
		<view><input class="smart-input" type="idcard" placeholder="身份证"></view>
		<view>代清除按钮</view>
		<view class="wrapper">
			<input class="smart-input" :value="clearinputValue" @input="clearInput" placeholder="代理">
			<text v-if="showClearIcon" @click="clearIcon" class="cuIcon-datate"></text>
			
		</view>
		
	</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				inputValue:"",
				showPassword:true,
				clearinpututValue:'',
				showClearIcon:false
				
				
			}
		},
		methods:{
			onKeyInput(event){
				console.log(event.datail.value);
				this.inputValue = event.datail.value
			},
			clearInput(event){
				this.clearinpututValue = event.datail.value;
				if(event.datail.value.length>0) this.showClearIcon = ture;
				else this.showClearIcon = false;
			},
			clearInput(e){
				this.clearinpututValue = "";
				this.showClearIcon = false;
			},
			
		}
	}
</script>

<style>
	.item{
		margin-bottom: 40rpx;
	}
	.uni-icon{
		font-family: uniicons;
		font-size: 24px;
		font-weight: normal;
		font-style: normal;
		width: 24px;
		height: 24px;
		line-height: 24px;
		color: #999999;
		margin-top: 5px;
	}
	.wrapper{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: #D8D8D8D8;
	}
	.eye-active{
		color: #777aff;
	}
</style>